<template>
  <div class="basic_info">
    <el-form :model="form" :inline="true"  >
      <el-form-item label="桥梁名称" prop="bridgeName">
          <el-input v-model="form.bridgeName" type="text" class="input"></el-input>
        </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="add">新增</el-button>
     </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="dataList" stripe>
      <el-table-column label="管养单位" align="center" prop="managementUnitDesc" />
      <el-table-column label="路线编号" align="center" prop="routeCode" />
      <el-table-column label="路线名称" align="center" prop="routeName" />
      <el-table-column label="桥梁名称" align="center" prop="bridgeName" >
        <template  v-slot="scope">
          <a style="cursor: pointer;"  @click="handleBridge(scope.row.id)">{{scope.row.bridgeName}}</a>
        </template>
      </el-table-column>
      <el-table-column label="桥梁编码" align="center" prop="bridgeCode" />
      <!-- <el-table-column label="桥梁身份码" align="center" prop="bridgeIdentityCode" /> -->
      <el-table-column label="上部结构类型" align="center" prop="superstructureType" />
      <el-table-column label="运营桩号" align="center" prop="operatingPileCode" />
      <!-- <el-table-column label="桥梁分类" align="center" prop="bridgeClassification" /> -->
      <el-table-column label="建成年月" align="center" prop="constructionDate" />
      <el-table-column label="操作" align="center" prop="cz">
        <template #default="scope">
          <a class="edit" @click="handleEdit(scope.row.id)">编辑</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[10,20,30]"
      :page-size="params.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <EditModal @getList="getResList" :editFormVisible="showEdit" @closeModal="showEdit=false" :editId="editId"/>
  </div>
</template>
<script  lang="ts">
// @ts-nocheck

import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import EditModal from './components/editModal.vue';
import baseService from "@/service/baseService";
import { useRoute, useRouter } from "vue-router";


export default defineComponent({
    name:"basicInfo",
    components:{
        EditModal,
    },
  setup() {
    const router = useRouter();

    let loading = ref(false);
    let dataList = ref([
     
    ]);
    let showEdit=ref(false);
    let params=reactive({
      limit:5,
      page:1,
    });
    let form=reactive({
      bridgeName:""
    })
    let total=ref(0);
   onMounted(()=>{
    getList()
   });
   const getResList=()=>{
   
    getList();
   }
   const getList=()=>{   
    loading.value=true;
    baseService.post("/demo/cmsbridges/page",{...params,...form}).then(res=>{
      console.log(res)
      loading.value=false
      if(res.code==0){
         dataList.value=res.data.list;
         total.value=res.data.total
      }
    })
  
   }
   let editId=ref<String>("");
    const  handleEdit =(id:String)=>{
        showEdit.value=true;
        editId.value=id;
        console.log(editId.value)
    };

    const add=()=>{
      showEdit.value=true;
      editId.value="";
    }
    const search=()=>{
      console.log(form.bridgeName)
     params.page=1;
     getList();
    }

    const handleSizeChange=(val: any)=>{
      params.limit=val;
       getList();

    }
   const handleCurrentChange=(val:any)=> {
       params.page=val;
       getList();
      }
  const handleBridge=(id:string)=>{
    console.log(id);
    router.replace("/bridgeCard");

  }
    return {
    loading,
    dataList,
    handleEdit,
    showEdit,
    params,
    add,
    search,
    handleSizeChange,
    handleCurrentChange,
    total,
    editId,
    getResList,
    form,
    handleBridge

   }  
}
});
</script>
<style lang="less" scoped>
.basic_info{
    .edit{
        cursor: pointer;

    }
}
</style>
